<template>
  <div class="control-management">
    <div class="task">
      <div class="task-left">
        <rangeview :droneList="droneList" :changeViewId="changeViewId" />
      </div>
      <div class="task-center">
        <monitorview :droneList="droneList" :changeViewId="changeViewId" />
      </div>
      <div class="task-right">
        <deviceview :deviceList="deviceList" :quickNavList="quickNavList" @changeView="getchangeView"></deviceview>
      </div>
    </div>
    <router-view />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import monitorview from './module/monitorview.vue';
import deviceview from './module/deviceview.vue';
import rangeview from './module/rangeview.vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const changeViewId = ref(2);
const droneList = ref([
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
]);
const deviceList = ref([
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
]);
// 同样，这里的 url 也可以使用以 http 开头的外部链接
const quickNavList = ref([
  {
    id: 1,
    color: '#1fdaca',
    icon: 'ion:home-outline',
  },
  {
    id: 2,
    color: '#bf0c2c',
    icon: 'ion:grid-outline',
  },
  {
    id: 3,
    color: '#e18525',
    icon: 'ion:layers-outline',
  },
  {
    id: 4,
    color: '#3fb27f',
    icon: 'ion:settings-outline',
  },
]);
const getchangeView = (item) => {
  changeViewId.value = item;
};
</script>

<style lang="scss" scoped>
.control-management {}

.task {
  display: flex;
  margin-top: 15px;

  .task-left {
    width: 43%;
  }

  .task-center {
    width: calc(52.5% - 1.3rem);
    margin-left: 1.3rem;
  }

  .task-right {
    width: calc(17.5% - 1.3rem);
    margin-left: 1.3rem;
  }
}
</style>
